<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/home/spumanage/spuaccount"
        >商品管理</el-breadcrumb-item
      >
      <el-breadcrumb-item>新增商品</el-breadcrumb-item>
      <el-breadcrumb-item>选择属性</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>
    <el-steps :active="1" simple style="margin-top: 20px">
      <el-step title="类目选择" icon="el-icon-files"></el-step>
      <el-step title="添加属性" icon="el-icon-s-operation"></el-step>
      <el-step title="添加图片" icon="el-icon-picture-outline"></el-step>
      <el-step title="添加详情" icon="el-icon-notebook-2"></el-step>
    </el-steps>

    <div class="box">
      已选择类目：<b>{{ ruleForm.categoryInfo }}</b>
      &nbsp;&nbsp;&nbsp;
      <el-button size="small" plain type="primary" @click="$router.go(-1)"
        >返回更改类目</el-button
      >
    </div>

    <div class="box">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <h3 style="line-height: 32px">
              <i class="el-icon-edit"></i> &nbsp; 基础信息
            </h3>
          </div>
        </el-col>
      </el-row>

      <div class="divider"></div>

      <el-row>
        <el-col :span="12">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="模板类型" prop="attributeTemplateId">
              <el-select
                v-model="ruleForm.attributeTemplateId"
                filterable
                placeholder="试试搜索"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <div class="noticerow box">
              通用属性 0/12个，填完 * 即可进行后续步骤
            </div>
            <el-form-item label="商品名称" prop="name">
              <el-input size="small" v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="商品品牌" prop="brandId">
                  <el-select
                    ref="brandSelect"
                    v-model="ruleForm.brandId"
                    filterable
                    placeholder="试试搜索"
                  >
                    <el-option
                      v-for="item in brandOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="标题" prop="title">
                  <el-input size="small" v-model="ruleForm.title"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="商品简介" prop="description">
              <el-input
                type="textarea"
                rows="5"
                size="small"
                v-model="ruleForm.description"
              ></el-input>
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="商品货号" prop="typeNumber">
                  <el-input
                    size="small"
                    v-model="ruleForm.typeNumber"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="计件单位" prop="unit">
                  <el-input size="small" v-model="ruleForm.unit"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="商品售价" prop="listPrice">
                  <el-input
                    size="small"
                    v-model="ruleForm.listPrice"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="排序" prop="sort">
                  <el-input
                    size="small"
                    placeholder="序号越大越靠前"
                    v-model="ruleForm.sort"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="商品库存" prop="stock">
                  <el-input size="small" v-model="ruleForm.stock"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="库存预警阈值" prop="stockThreshold">
                  <el-input
                    size="small"
                    v-model="ruleForm.stockThreshold"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="关键词" prop="keywords">
              <el-input size="small" v-model="ruleForm.keywords"></el-input>
              <p class="beizhu">
                关键词列表，输入多个关键词请以英文逗号进行分割
              </p>
            </el-form-item>
            <el-form-item label="商品标签" prop="tags">
              <el-tag
                :key="tag"
                v-for="tag in dynamicTags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)"
              >
                {{ tag }}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              >
              </el-input>
              <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="showInput"
                >+ 新标签</el-button
              >
            </el-form-item>

            <div class="divider"></div>
            <el-button @click="$router.go(-1)">上一步，类目选择</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >下一步，添加图片</el-button
            >
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import LocalStorage from "@/common/StorageUtils.js";
export default {
  data() {
    return {
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
      options: [],
      brandOptions: [],
      ruleForm: {
        name: "",
      },
      rules: {
        name: [
          { required: true, message: "该字段为必填字段", trigger: "blur" },
        ],
        brandId: [
          { required: true, message: "该字段为必填字段", trigger: "blur" },
        ],
        description: [
          { required: true, message: "该字段为必填字段", trigger: "blur" },
        ],
        keywords: [
          { required: true, message: "该字段为必填字段", trigger: "blur" },
        ],
        listPrice: [
          { required: true, message: "该字段为必填字段", trigger: "blur" },
        ],
        sort: [
          { required: true, message: "该字段为必填字段", trigger: "blur" },
        ],
        stock: [
          { required: true, message: "该字段为必填字段", trigger: "blur" },
        ],
        stockThreshold: [
          { required: true, message: "该字段为必填字段", trigger: "blur" },
        ],
        title: [
          { required: true, message: "该字段为必填字段", trigger: "blur" },
        ],
        unit: [
          { required: true, message: "该字段为必填字段", trigger: "blur" },
        ],
        typeNumber: [
          { required: true, message: "该字段为必填字段", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
      // 追加到this.ruleForm中
      this.ruleForm.tags = this.dynamicTags.toString();
    },

    /** 提交表单 */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 保存brandName冗余字段
          let brandName = this.$refs["brandSelect"].$data.selectedLabel;
          this.ruleForm.brandName = brandName;
          console.log("当前表单内容：", this.ruleForm);
          LocalStorage.save(LocalStorage.KEY_ADD_SPU, this.ruleForm);
          // 下一步
          this.$router.push("3");
        }
      });
    },

    /** 加载当前类别下的所有模板信息 */
    loadTempsByCategoryId(categoryId) {
      this.attrTemplateApi
        .queryByCategoryId({ categoryId })
        .then((res) => {
          console.log(`加载${categoryId}类别下的所有模板`, res);
          if (res.data.state == 200) {
            this.options = res.data.data;
          } else {
            this.$alert(res.data.message, "提示");
          }
        });
    },

    /** 加载品牌列表 */
    loadBrandsByCategoryId() {
      let categoryId = this.ruleForm.categoryId
      this.brandApi.queryByCategoryId({categoryId}).then((res) => {
        console.log("加载当前品牌下的类别信息", res)
        this.brandOptions = res.data.data
      })
    },
  },

  /** 页面挂载完毕后执行 */
  mounted() {
    // 加载上一步的spu数据
    let form = LocalStorage.get(LocalStorage.KEY_ADD_SPU);
    this.ruleForm = form;
    // 加载当前类别下的所有模板信息
    this.loadTempsByCategoryId(form.categoryId);
    // 加载并回调当前页面标签信息
    if (this.ruleForm.tags) {
      this.dynamicTags = this.ruleForm.tags.split(",");
    }
    // 加载所有品牌信息
    this.loadBrandsByCategoryId();
  },
};
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
